<div class="heart"></div>
<style>
  * {
      margin: 0;
      padding: 0;
  }

  .heart {
      -webkit-animation: heartbeat 1s infinite;
      -webkit-animation: heartbeat 1s infinite;
      /* Safari 和 Chrome */
      width: 198px;
      height: 198px;
      background: #f00;
      position: relative;
      -webkit-filter: drop-shadow(0px 0px 20px rgb(255, 20, 20));
      -webkit-transform: rotate(45deg);
      left: 200px;
      top: 200px;
  }

  .heart:before,
  .heart:after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      background: #f00;
      border-radius: 100px;
  }

  .heart:before {
      left: -100px;
  }

  .heart:after {
      left: 0;
      top: -100px;
  }

  @-webkit-keyframes heartbeat {
      0% {
          -webkit-transform: rotate(45deg) scale(0.8, 0.8);
          opacity: 1;
      }
      25% {
          -webkit-transform: rotate(45deg) scale(1, 1);
          opacity: 0.8;
      }
      100% {
          -webkit-transform: rotate(45deg) scale(0.8, 0.8);
          opacity: 1;
      }
  }
</style>